        <link rel="stylesheet" type="text/css" href="css/fitem.css">
        <script type="text/javascript">
        var url;
        function newCustomer(){
            $('#dlgCustomer').dialog('open').dialog('setTitle','Customer Baru');
            $('#fmCustomer').form('clear');
            url = 'pages/customer/customer_new.php';
        }
        function editCustomer(){
            var row = $('#dgCustomer').datagrid('getSelected');
            if (row){
                $('#dlgCustomer').dialog('open').dialog('setTitle','Edit Customer');
                $('#fmCustomer').form('load',row);
                url = 'pages/customer/customer_update.php?id='+row.idCustomer;
            }
        }
        function saveCustomer(){
            $('#fmCustomer').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#dlgCustomer').dialog('close');		// close the dialog
                        $('#dgCustomer').datagrid('reload');	// reload the user data
                        $.messager.show({
                            title: 'Sukses',
                            msg: result.msg
                        });
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }
        function removeCustomer(){
            var row = $('#dgCustomer').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to remove this customer?',function(r){
                    if (r){
                        $.post('pages/customer/customer_remove.php',{id:row.idCustomer},function(result){
                            if (result.success){
                                $('#dgCustomer').datagrid('reload');	// reload the user data
                            } else {
                                $.messager.show({	// show error message
                                    title: 'Error',
                                    msg: result.msg
                                });
                            }
                        },'json');
                    }
                });
            }
        }

            function doSearchDataCustomer() 
            {
                    var postThis = $('#fcariCustomer').serialize();
                    $('#dgCustomer').datagrid('reload',{
                            ref:postThis
                    });
            }


        </script>
    
	<table id="dgCustomer" title="Daftar Customer" class="easyui-datagrid"
			url="pages/customer/customer_getdata.php"
			toolbar="#toolbarCustomer" pagination="true"
			rownumbers="true" singleSelect="true" fitColumns="true">
		<thead>
			<tr>
				<th field="namaCustomer" width="50">Nama</th>
				<th field="alamatCustomer" width="50">Alamat</th>
				<th field="attnCustomer" width="50">Attn</th>
				<th field="telpCustomer" width="50">Telepon</th>
				<th field="faxCustomer" width="50">Fax</th>
				<th field="keterangan" width="50">Note</th>
			</tr>
		</thead>
	</table>
	<div id="toolbarCustomer" style='padding:5px;height:auto'>
            <table>
                <tr>
                    <td>
                        <form id='fcariCustomer'>	
                            Nama Customer: 
                            <input class='easyui-validatebox' type='text' name='filternamaCustomer' id='filternamacustomer'>
                            Alamat Customer: 
                            <input class='easyui-validatebox' type='text' name='filteralamatCustomer' id='filteralamatcustomer'>
                            Attn Customer: 
                            <input class='easyui-validatebox' type='text' name='filterattnCustomer' id='filterattncustomer'>
                            <a href='javascript:void(0)' class='easyui-linkbutton' iconCls='icon-search' onclick='doSearchDataCustomer()'>Cari Data</a>
                            <br><br>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newCustomer()">New</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="editCustomer()">Edit</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeCustomer()">Remove</a>
                        </form>
                    </td>	
                </tr>
            </table>
	</div>

    <div id="dlgCustomer" class="easyui-dialog" style="width:800px;height:auto;padding:10px;" closed="true" modal="true">
        <form id="fmCustomer" method="post">
            <div  class="fitem">
                <label>Nama Customer</label>
                <input class="easyui-validatebox" type="text" style="width:280px" name="namaCustomer" id="namaCustomer" required >
            </div>
            <div  class="fitem">
                <label>Alamat</label>
                <input class="easyui-validatebox" style="width:520px" name="alamatCustomer" required >
            </div>
            <div  class="fitem">
                <label>Attn</label>
                <input class="easyui-validatebox" style="width:280px" name="attnCustomer" required >
            </div>
            <div  class="fitem">
                <label>Telp</label>
                <input class="easyui-validatebox" style="width:180px" name="telpCustomer"><br>
            </div>
            <div  class="fitem">
                <label>Fax</label>
                <input class="easyui-validatebox" style="width:180px" name="faxCustomer"><br>
            </div>
            <div  class="fitem">
                <label>Keterangan</label>
                <textarea class="easyui-validatebox" name="keterangan" style="height:90px;width:520px"></textarea>
            </div>
            <div  class="fitem">
                <label></label><a href="#" class="easyui-linkbutton" onclick="saveCustomer()">Save</a>
            </div>
        </form>
    </div>
